<template>
	<div>
		<div class="box">
			<uni-forms
				ref="form"
				:model="currentInfoData.plan"
				validate-trigger="bind"
				:label-position="state == 'write' ? 'top' : 'left'"
				label-width="auto">
				<FromItem
					label="供应商"
					:required="true"
					:state="state"
					name="purchaseQuotationSupplierId">
					<ASelectUni
						:dict="{
							list: planDicts.supplierList,
							label: 'supplierName',
							value: 'supplierId',
						}"
						:state="state"
						v-model="
							currentInfoData.plan.purchaseQuotationSupplierId
						"
						@change="
							change_purchaseQuotationSupplierId
						"></ASelectUni>
				</FromItem>
				<FromItem
					label="首付款"
					:required="true"
					:state="state"
					name="purchaseQuotationDownpayment">
					<AInput
						tag="price"
						type="number"
						v-model="
							currentInfoData.plan.purchaseQuotationDownpayment
						"
						@blur="blur_purchaseQuotationDownpayment"></AInput>
				</FromItem>
				<FromItem
					label="保证金"
					:required="true"
					:state="state"
					name="purchaseQuotationCashdeposit">
					<AInput
						tag="price"
						type="number"
						:state="state"
						v-model="
							currentInfoData.plan.purchaseQuotationCashdeposit
						"></AInput>
				</FromItem>
				<FromItem
					label="留购价"
					:required="true"
					:state="state"
					name="purchaseQuotationRetained">
					<AInput
						tag="price"
						type="number"
						:state="state"
						v-model="
							currentInfoData.plan.purchaseQuotationRetained
						"></AInput>
				</FromItem>
				<FromItem
					label="期满租金"
					:required="true"
					:state="state"
					name="purchaseQuotationRentExpiry">
					<AInput
						tag="price"
						type="number"
						:state="state"
						v-model="
							currentInfoData.plan.purchaseQuotationRentExpiry
						"
						@blur="setPurchaseQuotationTotalCost"></AInput>
				</FromItem>
				<FromItem
					label="租期"
					:required="true"
					:state="state"
					name="purchaseQuotationTenancy">
					<AInput
						tag="price"
						type="number"
						:state="state"
						v-model="currentInfoData.plan.purchaseQuotationTenancy"
						@blur="setPurchaseQuotationTotalCost"></AInput>
				</FromItem>
				<FromItem
					label="月租金"
					:required="true"
					:state="state"
					name="purchaseQuotationRent">
					<AInput
						tag="price"
						type="number"
						:state="state"
						v-model="currentInfoData.plan.purchaseQuotationRent"
						@blur="setPurchaseQuotationTotalCost"></AInput>
				</FromItem>
				<FromItem
					label="对外总成本"
					:required="true"
					state="readonly"
					name="purchaseQuotationTotalCost">
					<AInput
						tag="price"
						type="number"
						state="readonly"
						v-model="
							currentInfoData.plan.purchaseQuotationTotalCost
						"></AInput>
				</FromItem>
			</uni-forms>
		</div>
	</div>
</template>

<script>
	import * as app from '@/api/index.js';
	import * as apis from '@/api/quota/apply/api.js';
	import * as utils from '@/pages/quota/libs/utils.js';
	import FromItem from '../formItem/index.vue';
	export default {
		name: '',
		components: { FromItem },
		dicts: [],
		props: {},
		inject: [
			'details_provide',
			'config_provide',
			'deptList_provide',
			'state_provide',
			'index_provide',
			'planDicts_provide',
			'fromtype_provide',
		],
		data() {
			return {};
		},
		computed: {
			details() {
				return this.details_provide();
			},
			config() {
				return this.config_provide();
			},
			deptList() {
				return this.deptList_provide();
			},
			planDicts() {
				return this.planDicts_provide();
			},
			state() {
				return this.state_provide();
			},
			fromtype() {
				return this.fromtype_provide();
			},

			index() {
				return this.index_provide();
			},
			currentInfoData() {
				return this.details.productList?.[this.index] ?? {};
			},
			plan() {
				return this.currentInfoData?.plan ?? {};
			},
			firstInfoData() {
				return this.details.productList?.[0] ?? {};
			},
		},
		watch: {},
		filters: {},
		created() {},
		mounted() {},
		methods: {
			change_purchaseQuotationSupplierId({ val, item }) {
				this.$set(
					this.plan,
					'purchaseQuotationSupplierName',
					item.supplierName,
				);

				this.$set(
					this.plan,
					'purchaseQuotationSupplierCode',
					item.supplierCode,
				);
			},
			blur_purchaseQuotationDownpayment() {
				this.setPurchaseQuotationTotalCost();
			},
			setPurchaseQuotationTotalCost() {
				let price = utils.toNumberAdd(
					this.currentInfoData?.plan?.purchaseQuotationDownpayment,
					this.currentInfoData?.plan?.purchaseQuotationRentExpiry,
				);
				let everyPrice = utils.toNumberRide(
					this.currentInfoData.plan.purchaseQuotationTenancy,
					this.currentInfoData.plan.purchaseQuotationRent,
				);
				let totalPrice = utils.toNumberAdd(price, everyPrice);
				this.$set(
					this.currentInfoData.plan,
					'purchaseQuotationTotalCost',
					totalPrice,
				);
			},
		},
		beforeDestroy() {
			if (this.notEmpty(this.details?.productList?.[this.index])) {
				this._resetFields([
					{
						data: this.currentInfoData.plan,
					},
				]);
			}
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		// margin: 20rpx;
		// padding: 20rpx;
		padding-top: 20rpx;
		background-color: #fff;
		border-radius: 8rpx;
		.title {
			border-bottom: 1px solid #e9e9e9;
			font-weight: 500;
			padding-bottom: 10rpx;
			margin-bottom: 10rpx;
		}
	}
</style>
